<template>
    <div class="publish-topic">
      <div class="return" @click="returnToPreviousPage">
         <img src="@/assets/return.png" alt="返回">
        <span class="returnfont">返回</span>
      </div>
      <h2>发布新话题</h2>
      <form @submit.prevent="submitTopic">
        <div class="form-group">
          <label for="topicTitle">标题</label>
          <input type="text" id="topicTitle" v-model="topic.title" maxlength="50" required 
                 placeholder="请输入标题" @input="updateRemainingCharacters">
          <p class="character-count">还可以输入{{ remainingCharacters }}个字</p>
        </div>
        <div class="form-group">
          <label for="topicContent">内容</label>
          <textarea id="topicContent" rows="10" v-model="topic.content" required></textarea>
        </div>
        <button type="submit">发布话题</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        topic: {
          title: '',
          content: ''
        }
      };
    },
    computed: {
      remainingCharacters() {
        return 50 - this.topic.title.length;
      }
    },
    methods: {
      submitTopic() {
        // 处理提交逻辑
        console.log('提交的话题信息:', this.topic);
        // 清空表单
        this.topic.title = '';
        this.topic.content = '';
      },
      updateRemainingCharacters() {
        // 更新剩余字符数
        this.remainingCharacters = 50 - this.topic.title.length;
      },returnToPreviousPage() {
      // 在这里实现返回上一页的逻辑，可以使用路由或者简单的浏览器历史记录来实现
      // 例如，使用 Vue Router：
      this.$router.go(-1);
      
      // 如果是关闭当前页面，可以使用 window.close()：
      // window.close();
     }
    }
  };
  </script>
  
  <style scoped>
  .publish-topic {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none; /* 禁止调整大小 */
  }
  .return {
  cursor: pointer;
  text-align: left;
  margin-bottom: -10px;
}

.returnfont{
    margin-left: 10px;
    color: rgb(59, 150, 255);
}

  .form-group {
    margin-bottom: 15px;
    text-align: left;
    margin-right: 20px;
  }
  
  .label {
    font-weight: bold;
  }
  
  /* input[type="text"],
  textarea {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
  } */
  
  .character-count {
    margin-top: 5px;
    color: #888;
    text-align: left;
    font-size: 10px;
  }
  
  /* button {
    padding: 10px 20px;
    background-color: rgb(59, 150, 255);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  } */
  
  button:hover {
    background-color: rgb(59, 150, 255);
  }
  </style>
  